<template>
    <h4>axios的基本使用</h4>
    <img class="code" src="@/assets/error/26.png" alt="" srcset=""> <br>
    <img class="code" src="@/assets/error/27.png" alt="" srcset=""> <br>
    <img class="code" src="@/assets/error/28.png" alt="" srcset=""> <br>

    <!-- <div v-show="flag" class="error">数据加载失败</div> -->
    <el-alert v-show="flag" title="数据加载失败" type="error" effect="dark" />
    <pre>请求数据 <br> {{ users }}</pre>
    <input type="button" value="发送请求加载数据" @click="sendRquestA()"> <br>
    <input type="button" value="发送请求加载数据" @click="sendRquestB()"> <br><br>
    <input type="button" value="axios的错误处理" @click="sendRquestError()"> <br>
</template>

<script>
import axios, { AxiosError } from "axios";
import { ElNotification } from 'element-plus'
const ERROR_MSG = {
    ECONNABORTED: "请求超时,请稍后重试",
    ETIMEDOUT: "网络异常,请检查网络连接",
    ERR_NETWORK: "网络异常,请检查网络连接",
    DEFAULT: "请求失败,未发送"
}
const HTTP_MSG = {
    401: "未授权",
    403: "未授权",
    404: "您所访问的资源不存在",
    500: "服务器异常,请联系管理员",
    DEFAULT: "服务器忙,请稍后重试"
}

export default {
    data() {
        return {
            flag: false,
            users: [],
            obj: {}
        }
    },
    methods: {
        sendRquestA() {
            axios.get("http://127.0.0.1:3000/api/users")
                .then((response) => {
                    // console.log(response);
                    this.users = response.data;
                })
                .catch((error) => {
                    // 使用者查看错误消息提示
                    // 浮动层的统一错误提示
                    ElNotification.error({
                        title: "加载数据失败"
                    })
                    // 基于业务的页面错误提示
                    this.flag = true;
                    // 开发者查看错误消息
                    console.error(error);
                })
        },
        async sendRquestB() {
            try {
                let { data } = await axios.get("http://127.0.0.1:3000/api/users")
                this.users = data;
            } catch (error) {
                // 使用者查看错误消息提示
                // 浮动层的统一错误提示
                ElNotification.error({
                    title: "加载数据失败"
                })
                // 基于业务的页面错误提示
                this.flag = true;
                // 开发者查看错误消息
                console.error(error);
            }
        },
        async sendRquestError() {
            try {
                // console.log(this.obj.aa.bb);
                let response = await axios.get("http://127.0.0.1:3000/api/users11")
                console.log(response);
            } catch (error) {
                // 提示开发者
                console.log(error);
                // 提示使用者
                // if( !(error instanceof AxiosError) ){
                //     ElNotification.error({
                //         title: "程序运行错误请联系管理员"
                //     })
                //     return;
                // }
                // if( !error.response ){
                //     ElNotification.error({
                //         title: ERROR_MSG[error.code] || ERROR_MSG.DEFAULT
                //     })
                //     return
                // }
                // ElNotification.error({
                //     title: HTTP_MSG[error.response.status] || HTTP_MSG.DEFAULT
                // })

                let msg = ""
                if (!(error instanceof AxiosError)) {
                    msg = "程序运行错误请联系管理员"
                } else if (error.response) {
                    msg = HTTP_MSG[error.response.status] || HTTP_MSG.DEFAULT;
                } else {
                    msg = ERROR_MSG[error.code] || ERROR_MSG.DEFAULT;
                }
                ElNotification.error({
                    title: msg
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.error {
    color: red;
}
</style>